.dragAndResize
{
    position: relative;

    user-select: none;

    *
    {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .item
    {
        position: absolute;

        width: 100px;
        height: 100px;

        cursor: move;

        border: 1px solid;
        background-color: #fff;

        .resizeHandle
        {
            position: absolute;
            right: 2px;
            bottom: 2px;

            width: 0;
            height: 0;

            cursor: nw-resize;

            opacity: .5;
            border-bottom: 10px solid black;
            border-left: 10px solid transparent;
        }
    }

    .moveAnimation
    {
        transition: top 80ms ease;
    }

    .canNotDrag
    {
        cursor: default!important;
    }

    .cloneNode
    {
        z-index: 3;

        transition: none;

        opacity: .5;
    }

    .movingItem
    {
        position: absolute;

        border: none;
        &:before
        {
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            content: '';

            background-color: #bbb;
        }
    }

    .positionBox
    {
        position: fixed;
        top: 0;
        right: 100px;

        overflow: auto;

        width: 500px;
        height: 500px;

        border: 1px solid;
    }

    .coords
    {
        position: fixed;
        right: 100px;
        bottom: 200px;

        overflow: auto;

        width: 200px;
        height: 200px;

        border: 1px solid;
    }
}
